<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .news {
            width: 400px;
            margin: 50px auto;
            text-align: left;
        }

        .news li {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        .news a {
            text-decoration: none;
            font-size: 14px;
            color: #222;
            line-height: 20px;
        }

        .news a:hover {
            color: #20a1f1;
        }
    </style>
</head>

<body>
    <script>
        // 需求：实现新闻列表
        const news = [
            { "category": "要闻", "title": "牢记初心使命 实干笃定前行", "href": "https://news.ifeng.com/c/7wNelHB0SgK" },
            { "category": "要闻", "title": "你以生命相托，我必全力以赴", "href": "https://news.ifeng.com/c/7wM1V3EzQBM" },
            { "category": "要闻", "title": "中国无人战车正式服役：机枪显示惊人杀伤力", "href": "https://tech.ifeng.com/c/7wMT02ftUZ4" },
            { "category": "健康", "title": "独家 | 武汉封城建议者：向武汉人民致敬，向援助武汉的人致敬", "href": "https://finance.ifeng.com/c/7wM0E6Bs8PI" },
            { "category": "汽车", "title": "马斯克发飙：起诉当地政府！总部搬离加州！", "href": "http://auto.ifeng.com/c/7wM43afWMFs" },
            { "category": "汽车", "title": "奇瑞真正的旗舰SUV，车长近5米+2.0T动力，气场不输路虎揽胜", "href": "https://auto.ifeng.com/c/7wIpWtWvHYv" },
            { "category": "房产", "title": "广州即将推出9宗土地 涉及22.2万平米4宗宅地", "href": "https://gz.house.ifeng.com/news/2020_05_11-52744145_0.shtml" }
        ];

        // 1. div+ul的前半部分
        document.write(`
            <div class="news">
                <ul>
        `);

        // 2. 动态生成li>a
        for (let i in news) {
            // i是真正的news数组的下标，访问数组元素：news[i] 是每个元素（对象）
            document.write(`
                    <li>
                        <a href="${news[i].href}">【${news[i].category}】${news[i].title}</a>
                    </li>
            `);

        }

        // 3. div+ul的结束
        document.write(`
                </ul>
            </div>
        `);

        // 案例与昨天的内容相同（内容相同）：数据比昨天的数据更真实
    </script>
</body>

</html>